<template>
  <view class="adress">
    <view class="myAddress">
      <view class="title">
        <view>我的地址</view>
        <view @click.stop="goIncreaseAddress">添加地址</view>
      </view>
      <block v-for="item in addressList" :key="item.id">
        <view class="address" @click="chooseAddress(item)">
          <view class="addressCon">
            <view>
              <image src="../../static/images/dz.png"></image>
            </view>
            <view class="addressData">
              <view class="userData">
                <view>{{ item.userName }}</view>
                <view>{{ item.telNumber }}</view>
              </view>
              <view>{{ item.allName + item.detailInfo }}</view>
            </view>
            <view @click.stop="edit(item)">编辑</view>
          </view>
          <view class="line"></view>
          <view class="defaultAddress">
            <view @click.stop="setDefault(item.id)">
              <view>
                <image :src="
                    item.type === 1
                      ? '../../static/images/xz.png'
                      : '../../static/images/wxz.png'
                  ">
                </image>
              </view>
              <view>{{ item.type === 0 ? "设为默认地址" : "默认地址" }}</view>
            </view>
            <view @click.stop="addressDetele(item.id)">删除</view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import {
    setStorage,
    getStorage
  } from "../../api/Storage"
  import {
    showModal
  } from "../../utils/util"
  export default {
    data() {
      return {
        addressList: [],
        path: "",
      }
    },
    onLoad(options) {
      this.path = options.path ? options.path : ""
    },
    onShow() {
      this.getAddress()
    },
    methods: {
      back(item) {
        uni.$emit("addressBack", encodeURIComponent(JSON.stringify(item)))
        uni.navigateBack({
          delta: 1,
        })
      },
      goIncreaseAddress() {
        uni.navigateTo({
          url: "/pages/addAddr/addAddr?type=add",
        })
      },
      edit(item) {
        uni.navigateTo({
          url: "/pages/addAddr/addAddr?item=" +
            encodeURIComponent(JSON.stringify(item)) +
            "&type=edit",
        })
      },

      //获取地址
      getAddress() {
        this.addressList = getStorage("addressList") || []
      },
      //删除地址
      addressDetele(id) {
        showModal({
          title: "是否删除该地址?",
        }).then((res) => {
          if (!res) return
          let addressList = this.addressList
          addressList.forEach((v, i) => {
            if (v.id === id) {
              addressList.splice(i, 1)
              this.setAddressList(addressList)
            }
          })
        })
      },
      setAddressList(addressList) {
        setStorage("addressList", addressList)
        this.getAddress()
      },
      //设置默认地址
      setDefault(id) {
        let addressList = this.addressList
        addressList.forEach((v) => (v.id === id ? (v.type = 1) : (v.type = 0)))
        this.setAddressList(addressList)
      },
      //选择地址
      chooseAddress(item) {
        if (this.path) return
        this.back(item)
      },
    },
  }
</script>

<style lang="scss">
  .myAddress {
    width: 750upx;
  }

  .title {
    width: 100%;
    padding: 0 33upx;
    height: 80upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #37384c;
    color: #fff;
  }

  .title>view:nth-of-type(1) {
    font-size: 32upx;
    line-height: 80upx;
    color: #fff;
  }

  .title>view:nth-of-type(2) {
    font-size: 24upx;
    line-height: 80upx;
    color: #fff;
  }

  .address {
    width: 626upx;
    height: 200upx;
    border-radius: 4upx;
    background-color: white;
    box-shadow: 0upx 2upx 10upx rgba(0, 0, 0, 0.3);
    margin: 20upx auto 0;
    padding: 20upx 40upx;
    box-sizing: content-box;
  }

  .addressCon {
    width: 100%;
    height: 130upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .addressCon>view:nth-of-type(1) {
    width: 70upx;
    height: 70upx;
    border-radius: 50%;
  }

  .addressCon>view:nth-of-type(1)>image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
  }

  .addressData {
    width: 72%;
    height: 92upx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1upx solid #eee;
  }

  .userData {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .userData>view:nth-of-type(1) {
    font-size: 40upx;
    color: #333;
    padding-right: 32upx;
    line-height: 30upx;
  }

  .userData>view:nth-of-type(2) {
    font-size: 28upx;
    color: #333;
  }

  .addressData>view:nth-of-type(2) {
    font-size: 24upx;
    color: #333;
  }

  .addressCon>view:nth-of-type(3) {
    font-size: 24upx;
    color: #333;
  }

  .line {
    width: 100%;
    height: 2upx;
    background-color: #eee;
    margin-top: 15upx;
  }

  .defaultAddress {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70upx;
  }

  .defaultAddress>view:nth-of-type(1) {
    display: flex;
    justify-content: flex-start;
    height: 40upx;
  }

  .defaultAddress>view:nth-of-type(1)>view:nth-of-type(1) {
    width: 40upx;
    height: 40upx;
    border-radius: 50%;
    align-items: center;
  }

  .defaultAddress>view:nth-of-type(1)>view:nth-of-type(1)>image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
  }

  .defaultAddress>view:nth-of-type(1)>view:nth-of-type(2) {
    margin-left: 10upx;
    font-size: 24upx;
    color: #333;
  }

  .defaultAddress>view:nth-of-type(2) {
    font-size: 24upx;
    color: #333;
  }
</style>
